
<template>
  <div class="main">
    <div class="change_background" @click="img_close" id="change_background">
      <div class="change" @click="funStopProp">
        <div
          style="
            position: relative;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
          "
        >
          <form>
            <input type="file" id="file" name="file" />
            <el-button @click="changeImg"> Change Img </el-button>
          </form>
        </div>
      </div>
    </div>

    <div class="userImg" @click="open">
      <img :src="imgUrl" width="100px" height="100px" />
    </div>
    <div class="divdiv">
      <div class="main_left">
        <div class="title">UID:{{ userUid }}</div>
        <div class="elui">
          <el-tree
            :data="Data"
            :props="defaultProps"
            accordion
            @node-click="handleNodeClick"
            style="width: 100%; font-size: 25px"
          >
          </el-tree>
        </div>
      </div>
      <div class="main_right">
        <!-- <userPanel></userPanel> -->
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>
<script>
import home from "@/components/home.vue";
import axios from "axios";
import userPanel from "@/components/userPanel";
import characterPanel from "@/components/characterPanel";
import hello from "@/components/Hello";

export default {
  comments: {
    home,
    userPanel,
    characterPanel,
    hello,
  },
  created() {},
  data() {
    let user = JSON.parse(sessionStorage.getItem("user"));
    console.log(user);
    if (user.userImg == null) {
      user.userImg = "/static/img/defImg.png";
    }
    const that = this;
    let token = sessionStorage.getItem("token");
    axios({
      headers: {
        "Content-Type": "application/json",
        token: token,
      },
      method: "Get",
      url:
        "http://localhost:8081/menu-info/getUserMenu" + "?" + "uid=" + user.uid,
    }).then(async function (r) {
      var result = JSON.parse(JSON.stringify(r.data));
      if (result.code === "0") {
        that.Data = result.data;
      } else {
        alert(result.msg);
      }
    });
    return {
      userName: user.userAccount,
      userUid: user.uid,
      menuAddress: "",
      Data: [],
      defaultProps: {
        children: "childList",
        label: "menuName",
      },
      imgUrl: user.userImg,
    };
  },
  methods: {
    handleNodeClick(data) {
      if (data.menuAddress == "5") {
        this.$router.push("/home/user");
      }
      if (data.menuAddress == "2") {
        this.$router.push("/home/character");
      }
      if (data.menuAddress == "6") {
        this.$router.push("/home/classPanel");
      }
      if (data.menuAddress == "7") {
        this.$router.push("/home/course");
      }
      if (data.menuAddress == "8") {
        this.$router.push("/home/department");
      }
    },
    open() {
      document.getElementById("change_background").style.display = "block";
    },
    img_close() {
      document.getElementById("change_background").style.display = "none";
    },
    funStopProp() {
      event.stopPropagation();
    },
    changeImg() {
      let that = this;
      let token = sessionStorage.getItem("token");
      let user = JSON.parse(sessionStorage.getItem("user"));
      var formData = new FormData();
      var file = document.getElementById("file").files[0];
      formData.append("file", file);
      console.log(file);
      axios({
        headers: {
          "Content-Type": "application/json",
          token: token,
        },
        method: "Post",
        url: "http://localhost:8081/user/upload",
        data: formData,
      }).then(async function (r) {
        var result = JSON.parse(JSON.stringify(r.data));
        if (result.code === "0") {
          alert("上传成功");
          document.getElementById("change_background").style.display = "none";
          let token = sessionStorage.getItem("token");
          axios({
            headers: {
              token: token,
            },
            method: "Get",
            url: "http://localhost:8081/user-info/getUserInfo",
            params: {
              uid: user.uid,
            },
          }).then(function (r) {
            let result = JSON.parse(JSON.stringify(r));
            if (result.data.code === "0") {
              sessionStorage.removeItem("user");
              sessionStorage.setItem("user",JSON.stringify(result.data.data.data[0]))
              that.imgUrl = result.data.data.data[0].userImg;
              
            }
          });
        } else {
          alert(result.msg);
        }
      });
    },
  },
  mounted() {
    this.$router.push("/home/hello").catch((err) => {
      err;
    });
  },
};
</script>
<style scoped>
html,
body,
#home {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.title {
  font-size: 30px;
  text-align: left;
}
.elui {
  font-size: 20px;
}
.divdiv {
  height: 98%;
  padding-top: 5px;
  position: relative;
}
* {
  text-decoration: none;
  list-style: none;
}
.main {
  width: 100%;
  height: 100%;
  background-color: rgb(203, 233, 247);
}
.main_left {
  float: left;
  margin-left: 5px;
  width: 24%;
  height: 100%;
  background-color: rgb(255, 255, 255);
  border-radius: 0px 15px 15px 0px;
  box-shadow: gray 5px 5px 10px;
}
.main_right {
  float: right;
  width: 75%;
  height: 100%;
}

.userImg {
  position: absolute;
  right: 0;
  top: 0;
  width: 100px;
  height: 100px;
  background-color: rgb(255, 255, 255);
  border-radius: 50%;
  border: white 2px solid;
  box-shadow: 2px 2px 15px 2px;
  overflow: hidden;
  z-index: 10;
}
.userImg:hover {
  border: lightseagreen 2px solid;
}
.change_background {
  z-index: 11;
  position: absolute;
  top: -10%;
  width: 100%;
  height: 110%;
  background-color: rgba(0, 0, 0, 0.5);
  display: none;
}
.change {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 30%;
  height: 40%;
  background-color: white;
  border-radius: 15px;
}
</style>
